<template>
  <div class="search">
    <form @submit.prevent="change(keywords)">
      <div class="searchct">
        <div class="input">
          <i></i>
          <input
            @input="valChange"
            v-model="keywords"
            type="text"
            placeholder=" 搜索歌曲、歌手、专辑"
          />
          <i @click="empty" v-show="keywords != ''"></i>
          <template v-if="showSug">
            <SearchSuggest
              :keywords="keywords"
              @change="change"
            ></SearchSuggest>
          </template>
        </div>
      </div>
    </form>

    <component :is="search" :keywords="keywords" @change="change"></component>

    <!-- 历史记录 -->
    <div class="history" v-if="search == 'hot-search'">
      <ul>
        <li v-for="(h, index) in historyList" :key="index">
          <div>
            <van-icon name="underway-o" /><span>{{ h }}</span>
          </div>
          <van-icon name="cross" @click="delHisItem(index)" />
        </li>
      </ul>
    </div>
    <!-- 历史记录 -->
  </div>
</template>
<script>
import HotSearch from "../components/HotSearch.vue";
import SearchSuggest from "../components/SearchSuggest.vue";
import SearchResult from "../components/SearchResult.vue";
export default {
  name: "Recommend",
  data() {
    return {
      search: "hot-search",
      keywords: "",
      inputing: false, //标记是否是文本框正在输入
      showSug: false,
      historyList: [], //搜搜历史记录
    };
  },
  created() {
    // console.log(this.showSug);
  },
  mounted() {
    //每次进入这个搜索页面的时候，就拿到本地存储上的数据，如果一开始没有这个数据列表，就设置为空数组，避免报错
    this.historyList = JSON.parse(window.localStorage.getItem("hsong")) || [];
  },
  methods: {
    //点击清空输入框 X 时触发
    empty() {
      this.keywords = "";
    },
    // 输入框回车提交、点击热门搜索的歌曲、历史记录时触发
    change(val) {
      this.showSug = false;
      this.inputing = false;
      this.keywords = val;
      this.search = "search-result";
      if (val.trim() == "") {
        console.log(111);
        return 0;
      } else if (this.historyList.indexOf(val.trim()) == -1) {
        {
          this.historyList.unshift(val.trim());
          //把新的数组存到本地存储上，名字为hsong，内容是解释过后的JSON格式
          window.localStorage.setItem(
            "hsong",
            JSON.stringify(this.historyList)
          );
        }
      }
      //如果历史记录数组里面没有当前需要加入的歌曲名，那么就把这条记录添加到数组的头部
    },
    // 输入框变化时触发
    valChange() {
      this.inputing = true;
    },

    //删除历史记录的某一条时触发
    delHisItem(index) {
      this.historyList.splice(index, 1);
      window.localStorage.setItem("hsong", JSON.stringify(this.historyList));
    },
  },
  watch: {
    keywords(val) {
      if (val == "") {
        this.search = "hot-search";
        this.showSug = false;
      } else if (this.inputing) {
        this.search = "";
        this.showSug = true;
      }
    },
  },
  components: {
    HotSearch,
    SearchSuggest,
    SearchResult,
  },
};
</script>
<style lang="less" scoped>
.searchct {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  .input {
    position: relative;
    width: 100%;
    height: 30px;
    padding: 10px;
    box-sizing: border-box;
    background: #ebecec;
    border-radius: 30px;
    display: flex;
    align-items: center;
    i:first-of-type {
      display: inline-block;
      width: 13px;
      height: 13px;
      background-image: url();
    }
    i:last-of-type {
      display: inline-block;
      width: 13px;
      height: 13px;
      background-image: url();
    }
    input {
      flex: 1;
      background-color: transparent;
      outline: none;
      border: none;
    }
    .searchsuggest {
      position: absolute;
      top: 28px;
      left: 0;
      width: 100%;
    }
  }
}
//历史搜索记录
.history {
  color: white;
  ul {
    padding: 0 12px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      border-bottom: 1px solid rgb(94, 92, 92);
      div {
        i {
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
          font-size: 15px;
          margin-left: 8px;
        }
      }
    }
  }
}
</style>